import React from 'react';
import { Link } from 'react-router-dom';
import './Navigation.css';

const Navigation = () => {
  return (
    <nav className="navigation">
      <ul>
        <li className="official-example">
          <Link to="/examples">官方示例</Link>
        </li>
        <li className="divider"></li>
        <li><Link to="/basic">基础单滑块</Link></li>
        <li><Link to="/range">双滑块范围选择</Link></li>
        <li><Link to="/vertical">垂直滑块</Link></li>
        <li><Link to="/tooltip">带工具提示的滑块</Link></li>
        <li><Link to="/custom">自定义样式滑块</Link></li>
        <li><Link to="/date">日期选择滑块</Link></li>
        <li><Link to="/merge-tooltip">合并重叠提示</Link></li>
        <li><Link to="/input">输入框联动</Link></li>
        <li><Link to="/color-picker">颜色选择器</Link></li>
        <li><Link to="/pips">刻度标记交互</Link></li>
        <li><Link to="/steps">步骤 API 示例</Link></li>
        <li><Link to="/skip-step">跳过步骤示例</Link></li>
        <li><Link to="/non-linear">非线性和线性范围</Link></li>
        <li><Link to="/soft-limit">软限制示例</Link></li>
        <li><Link to="/locked">锁定滑块示例</Link></li>
      </ul>
    </nav>
  );
};

export default Navigation; 